<template>
  <div>
    <div class="toolbar">
      <Input v-model="query.text" placeholder="名称、值" suffix="ios-search" style="width: 200px" />
      <Button icon="ios-search">查询</Button>
      <Button icon="ios-refresh">刷新</Button>
      <Button icon="ios-add" @click="modal=true">新增</Button>
      <Button icon="ios-create-outline" @click="onEdit">编辑</Button>
      <Button icon="ios-trash-outline">删除</Button>
    </div>
    <div class="tree-data">
      <tree-table :expand-type="true" :selectable="true" :columns="columns"
       :data="data" searchable="true" :show-index="true" @radio-click="onRowSelect">
        <template slot="status" slot-scope="scope" is-fold="false">
          {{scope.row.status=="1"?'启用':'禁用'}}
        </template>
      </tree-table>
    </div>
    <Modal
        v-model="modal"
        :title="title"
        ok-text="保存"
        @on-ok="handleSave('modal')"
        @on-cancel="cancel" ref="modal">
        <Form ref="formInline" :model="model" :rules="ruleInline" :label-width="80">
          <FormItem label="名称" prop="name">
              <Input type="text" v-model="model.name" placeholder="名称">
              </Input>
          </FormItem>
          <FormItem label="值" prop="value">
              <Input type="text" v-model="model.value" placeholder="值">
              </Input>
          </FormItem>
          <FormItem label="排序">
              <Input type="number" v-model="model.order" placeholder="排序">
              </Input>
          </FormItem>
          <FormItem label="是否启用">
              <i-switch v-model="status" @on-change="statusChange" />
          </FormItem>
          <FormItem label="描述">
              <Input v-model="model.remark" type="textarea" placeholder="描述" />
          </FormItem>
        </Form>
    </Modal>
  </div>
</template>
<script>
import Tables from '_c/tables'
import { getDicTypeTree,saveDicType } from '@/api/data/'
export default {
  name: 'dictionary_type',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        {
          title: 'id',
          key: 'id',
          width: '100px'
        },
        {
          title: '名称',
          key: 'name',
          width: '400px'
        },
        {
          title: '值',
          key: 'value',
          minWidth: '50px'
        },
        {
          title: '排序',
          key: 'order'
        },
        {
          title: '状态',
          key: 'status',
          template: 'status',
          type: 'template'
        },
        {
          title: '描述',
          key: 'remark',
          minWidth: '200px',
        }
      ],
      data: [],
      query: {
        text:''
      },
      model: {
        name: '',
        status: 1,
        parentId: 0
      },
      title: '新增',
      modal: false,
      status: true,
      ruleInline: {
                    name: [
                        { required: true, message: '请输入字典类型名称', trigger: 'blur' }
                    ],
                    value: [
                        { required: true, message: '请输入字典类型值', trigger: 'blur' }
                    ]
                }
    }
  },
  mounted() {
    this.handleGetData();
  },
  methods: {
    handleGetData() {
      getDicTypeTree("{}").then(res=>{
        var data=res.data;
        console.log(data)
        if(data.status!=200){
          this.$Message.info(data.msg);
        }else{
          this.data=data.data;
        }
      });
    },
    handleSave(name) {
      // this.$refs[name].validate((valid) => {
      //               if (valid) {
      //                   this.$Message.success('Success!');
      //               } else {
      //                   this.$Message.error('Fail!');
      //               }
      //           })
      
      saveDicType(this.model).then(res=>{
        var data=res.data;
        if(data.status!=200){
          this.$Message.error(data.msg);
        }else{
          this.handleGetData();
        }
      });
    },
    cancel() {

    },
    statusChange(status) {
      this.model.status=status?1:0;
    },
    onEdit() {
      this.title="修改";
      this.modal=true;
      this.status=this.model.status==1;
    },
    onRowSelect(row, rowIndex) {
      this.model=row.row;
      console.log(row);
    }
  }
}
</script>
<style lang="less">
.toolbar {
  margin-bottom: 5px;
}
</style>
